<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
  <script src="lib/jquery.min.js"></script>
</head>
<body>
  <div style="width: 600px;height: 400px"></div>
  <button id="btn1">触发行为</button>
  <button id="btn2">clear</button>
  <button id="btn3">setOption</button>
  <button id="btn4">dispose</button>
  <script>
    var mCharts = echarts.init(document.querySelector('div'))
    var pieData = [
      { name: '淘宝', value: '13431' },
      { name: '天猫', value: '6589' },
      { name: '京东', value: '26989' },
      { name: '唯品会', value: '5469' },
      { name: '小红书', value: '10697' },
    ]
    var option = {
      tooltip: {
        show: true
      },
      legend: {
        data: ['淘宝', '天猫', '京东', '唯品会', '小红书']
      },
      series: [
        {
          type: 'pie',
          data: pieData,
        }
      ]
    }
    mCharts.setOption(option)
    mCharts.on('click', function(arg) {
      console.log(arg)
      console.log('click')
    }) // 对事件监听

    mCharts.off('click') // 关闭点击事件

    mCharts.on('legendselectchanged', function(arg) {
      console.log(arg)
      console.log('legendselectchanged')
    })

    $('#btn1').click(function() {
      // 模拟用户行为
      mCharts.dispatchAction({
        type: 'highlight', // 事件类型
        seriesIndex: 0, // 系列的索引
        dataIndex: 1 // 数据的索引
      })
      mCharts.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: 2
      })
    })

    $('#btn2').click(function() {
      // 清空图表的实例
      mCharts.clear()
    })

    $('#btn3').click(function() {
      // 重新设置 option
      mCharts.setOption(option)
    })

    $('#btn4').click(function() {
      // 销毁mCharts实例
      mCharts.dispose()
    })
  </script>
</body>
</html>